<template>
    <div v-for="item in list" :key="item.id" class="items">
        <div class="left">
            <img :src="'https://images.weserv.nl/?url='+item.avatar" alt="">
        </div>
        <div class="right">
            <p>{{ item.username }}</p>
            <p>{{ item.date }}</p>
            <h3>{{ item.content }}</h3>
        </div>
    </div>
</template>
<script setup lang="ts">
    import {getCommentsList} from "@/api/request";
    import {ref} from "vue";

interface commendFormat{
    avatar:string
    content:string
    date:string
    id:string
    username:string
}
let list = ref<commendFormat[]>([]);

getCommentsList().then(res=>{
        // console.log(res);
        list.value = res.data.result.items;
    })
</script><script>

</script>
<style lang="less">
    .items{
        display: flex;
        margin-bottom: 10vw;
        padding:4vw;
        .left>img{
            width: 10vw;
            height: 10vw;
            border-radius: 50%;
        }
        .right{
            text-align: left;
            padding-left: 10vw;
            p{
                color:#757575;
                font-size: 3.5vw;
            }
            h3{
                font-weight: 400;
                margin-top:3vw;
                font-size: 3.5vw;
            }
        }
    }
</style>